<template>
    <div>
        <h1>显示户型信息</h1>
        户型名称
        <input type="text" v-model="Page.Name">
        户型结构
        <select v-model="Page.TypeId">
            <option value="0">请选择</option>
            <option v-for="s in datatype" :value="s.TypeId">{{ s.TypeName }}</option>
        </select>
        <input type="button" value="查询" @click="Show">
        <table class="table">
            <thead>
                <tr>
                    <th>编号</th>
                    <th>户型名称</th>
                    <th>户型结构</th>
                    <th>建筑面积</th>
                    <th>套内面积</th>
                    <th>户型图</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="a in data">
                    <th>{{a.Id}}</th>
                    <th>{{a.Name}}</th>
                    <th>{{a.TypeName}}</th>
                    <th>{{a.JM2}}</th>
                    <th>{{a.TM2}}</th>
                    <th>
                        <a :href="'https://localhost:7071/'+a.img">查看</a>
                    </th>
                    <th>
                        <input type="button" value="修改" @click="Upd(a.Id)">
                        <input type="button" value="逻辑删除" @click="Del(a.Id,a.isDel)">
                    </th>
                </tr>
            </tbody>
        </table>
        <input type="button" value="首页" @click="Fanye(1)">
            <input type="button" value="上一页" @click="Fanye(Page.PageIndex-1)">
            <input type="button" value="下一页" @click="Fanye(Page.PageIndex+1)">
            <input type="button" value="尾页" @click="Fanye(Total.TotalPage)">
            当前{{Page.PageIndex}}页 共{{Total.TotalPage}}页 共{{Total.TotalCount}}行
            页容量 <select v-model="Page.PageSize" @click="Y">
                <option value="2">==2==</option>
                <option value="3">==3==</option>
                <option value="5">==5==</option>
            </select>
            <input type="text" v-model="Page.PageIndex">
            <input type="button" value="跳转" @click="T"> <br>
            <a href="/Add">新增户型</a>
    </div>
</template>

<script setup lang="ts">
    import { ref,onMounted } from 'vue';
    import axios from 'axios';
    import { useRoute,useRouter } from 'vue-router';
    const route = useRoute()
    const router = useRouter()
    const Upd=(vid:any)=>{
        router.push({path:"/Update",query:{id:vid}})
    }
    const Del=(sid:any,sta:any)=>{
        if(!confirm('确认删除吗')){
            return
        }
        axios.get("https://localhost:7071/api/Store/DeleteStore",{params:{id:sid,isdel:sta}}).then(res=>{
            if(res.data>0){
                alert('删除成功')
                Show()
            }
            else{
                alert('删除失败')
            }
        })
    }
    const data = ref([{
      "Id": 1,
      "Name": "",
      "TypeId": 0,
      "JM2": 0,
      "TM2": 0,
      "img": "",
      "isDel": true,
      "TypeName": ""
    }])
    const Page = ref({
        "PageIndex":1,
        "PageSize":2,
        "Name":"",
        "TypeId":0
    })
    const Total = ref({
        "TotalPage":1,
        "TotalCount":1
    })
    const datatype = ref([{
        "TypeId": 0,
        "TypeName": "0"
    }])
    const Fanye=(val:any)=>{
        if(val>=1&&val<=Total.value.TotalPage){
            Page.value.PageIndex = val
            Show()
        }
    }
    const Y=()=>{
        Show()
    }
    const T=()=>{
        Show()
    }
    onMounted(()=>{
        Show()
        Type()
    })
    const Type=()=>{
        axios.post("https://localhost:7071/api/Store/GetAllType").then(res=>{
            datatype.value = res.data
        })
    }
    const Show=()=>{
        axios.get("https://localhost:7071/api/Store/GetAllStore",{params:Page.value}).then(res=>{
            data.value = res.data.data
            Total.value.TotalCount = res.data.count
            Total.value.TotalPage = Math.ceil(Total.value.TotalCount/Page.value.PageSize)
        })
    }
</script>

<style scoped>

</style>